<template>
<el-dialog
    title="领队名单"
    class="gl_dialog_TitleLine gl_dl_footer addFee"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1080px"
    @close="close"
  >
  <div>
    <div style="overflow: hidden;">
      <el-row :gutter="20" class="gl_searchBox">
        <el-col :span="6" :lg="6">
          <p>按姓名</p>
          <el-input v-model="api_GET_EventsManagementCompetitionEntryWhiteListQO.Name" placeholder="请输入姓名" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="6" :lg="6">
          <p>按证件号码</p>
          <el-input v-model="api_GET_EventsManagementCompetitionEntryWhiteListQO.IdCardNumber" placeholder="请输入证件号码" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :md="6" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getPageList()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_mb_15 gl_mt_15">
      <el-row :gutter="20">
        <el-col :span="6" :lg="12">
          <el-button type="success" size="mini" style="margin-right: 10px;"  @click="downloadTmp(baseUrl + excelPath, '导入模板')">
            <a
            class="mock_btn gl_fl"
            target="_blank"
            download="导入模板"
            >
            下载导入模板
          </a></el-button>
          <el-upload
          style="display: inline-block;margin-right: 10px;"
          :action="importAction"
          :before-upload="beforeUpload"
          :http-request="upLoadFile"
          :auto-upload="true"
          :show-file-list="false"
          accept=".xlsx, .xls"
        >
          <el-button :loading="btnUpLoading" type="warning" size="mini" >导入名单</el-button>
        </el-upload>
          <el-button type="primary" size="mini" @click="addpeopele">添加人员</el-button>
          <el-button type="danger" size="mini" @click="deleteList">批量删除</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table class="gl_mb_15" :data="tableData" v-loading="tableLoading" size="mini" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="55" label="序号"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="证件类型">
        <template slot-scope="{ row }">
          {{ findDictDataByCode('idCardType', row.idCardTypeCode) }}
        </template>
      </el-table-column>
      <el-table-column label="证件号码" prop="idCardNumber"/>
    </el-table>
    <el-row style="text-align: center;" class="gl_pb_15">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="api_GET_EventsManagementCompetitionEntryWhiteListQO.MaxResultCount"
        :current-page="api_GET_EventsManagementCompetitionEntryWhiteListQO.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <addWhiitePeopleVue ref="whiitePeopleVue" />
  </div>
</el-dialog>
</template>

<script>
import addWhiitePeopleVue from './addWhiitePeople.vue';
import { api_Post_UploadFileAddHeader } from '@/extend/api/file';
import { api_GET_EventsManagementCompetitionEntryWhiteList, api_DELETE_EventsManagementCompetitionEntryWhiteList } from '@/extend/api/whilteListApi/api'
import {
  api_GET_EventsManagementCompetitionEntryWhiteListQO
} from '@/lib/form/whiteList';
import { mapState, mapActions } from 'vuex';
export default {
  components: {
    addWhiitePeopleVue
  },
  data() {
    return {
      importAction: `${WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE}/api/app/events-management/competitionEntryWhiteList/import`,
      gameId:'',
      dialogVisible: false,
      tableLoading: false,
      tableData: [],
      deleteSelection: [],
      total: 0,
      btnUpLoading: false,
      file: '',
      api_GET_EventsManagementCompetitionEntryWhiteListQO: new api_GET_EventsManagementCompetitionEntryWhiteListQO(),
      baseUrl: WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE, // 基本路径地址
      excelPath: `/Files/Import_EntryWhiteTemplate.xlsx` // 下载模板路径
    }
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    beforeUpload(file) {
      this.file = file;
    },
    addpeopele() {
      this.$refs.whiitePeopleVue.dialogVisible = true;
      this.$refs.whiitePeopleVue.formdata.competitionId = this.gameId;
    },
        // 表格选中
    handleSelectionChange(val) {
      const id = val.map(item => {
        return item.id;
      });
      this.deleteSelection = id;
    },
    getPageList(page) {
      this.tableLoading = true;
      this.api_GET_EventsManagementCompetitionEntryWhiteListQO.CompetitionId = this.gameId;
      this.api_GET_EventsManagementCompetitionEntryWhiteListQO.Page = page || 1;
      this.api_GET_EventsManagementCompetitionEntryWhiteListQO.SkipCount = (this.api_GET_EventsManagementCompetitionEntryWhiteListQO.Page - 1) * this.api_GET_EventsManagementCompetitionEntryWhiteListQO.MaxResultCount;
      api_GET_EventsManagementCompetitionEntryWhiteList(this.api_GET_EventsManagementCompetitionEntryWhiteListQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取赛事列表失败！' });
      });
    },
    changePage(page) {
      this.getPageList(page);
    },
    deleteList() {
      var that = this;
      if (that.deleteSelection.length > 0) {
        that.$confirm('您确定要删除所选人员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = [];
          api_DELETE_EventsManagementCompetitionEntryWhiteList({ids: that.deleteSelection}).then(res => {
           this.$message({ type: 'success', message: '删除成功！' });
           this.getPageList();
         }, () => {
          this.$message({ type: 'error', message: '删除失败！' });
         });
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else {
        that.$message({
          type: 'warning',
          message: '请先选择内容!'
        });
      }

    },
        // 根据code在相应字典中寻找数据
    findDictDataByCode (dictKey, code) {
      const _dict = this.dict[dictKey];
      if (_dict) {
        const _find = _dict.find(item => item.code === code) || {};
        return _find.value || '';
      } else {
        console.log('findDictDataByCode -> findDictDataByCode: ' + dictKey + ', 未找到字典数据.');
        return '';
      }
    },
    changePageSize(pagesize) {
      this.api_GET_EventsManagementCompetitionEntryWhiteListQO.MaxResultCount = pagesize;
      this.getPageList();
    },
    downloadTmp(url, fileName) {
      var x = new XMLHttpRequest();
      x.open('GET', url, true);
      x.responseType = 'blob';
      x.onload = function(e) {
        var url = window.URL.createObjectURL(x.response);
        var a = document.createElement('a');
        a.href = url;
        a.download = fileName + '.xlsx';
        a.click();
      };
      x.send();
    },
        // 导入名单
    upLoadFile() {
      var _this = this;
      _this.btnUpLoading = true;
      api_Post_UploadFileAddHeader(this.importAction, this.file, { competitionId: this.gameId }).then(res => {
        _this.$message({
          type: 'success',
          duration: 10000,
          showClose: true,
          message: `导入成功`
        });
        _this.btnUpLoading = false;
        _this.getPageList();
      },
      rej => {
        const err = JSON.parse(rej.request.response).error.message;
        _this.btnUpLoading = false;
        console.dir(err);
        _this.$message({
          type: 'error',
          message: '导入失败 ' + err
        });
      }
      ).catch(error => {
        _this.btnUpLoading = false;
        _this.$message({
          type: 'error',
          message: '导入失败 '
        });
      });
    },
        // 重置搜索表单
     reset() {
      this.api_GET_EventsManagementCompetitionEntryWhiteListQO = new api_GET_EventsManagementCompetitionEntryWhiteListQO();
      this.getPageList();
    },
            // 关闭弹窗
        close () {
      this.$nextTick(() => {
        this.dialogVisible = false,
        this.deleteSelection = [],
        this.api_GET_EventsManagementCompetitionEntryWhiteListQO = new api_GET_EventsManagementCompetitionEntryWhiteListQO()
      });
    }

  }
}
</script>

<style>

</style>
